<template>
  <div class="bottom">
    <div class="center-div">
      <div class="login-title">教师登录</div>
      <div class="login-upkb">
        <el-input class="login-username" v-model="form.username" placeholder="请输入用户名"></el-input>
        <el-input class="login-passworld" v-model="form.passworld" type="password" placeholder="请输入密码"></el-input>
        <el-button class="login-kk" :loading="isloading" @click="login">登录</el-button>
        <el-button class="login-btn">看看</el-button>
      </div>
    </div>
  </div>
</template>

<script>

  export default {
    name: 'art-login',
    components: {},
    data() {
      return {
        msg: 'msg',
        isloading: false,
        form : {
          username: '',
          passworld: ''
        }
      }
    },
    methods: {
      testFunc: function () {
        console.log('testFunc')
      },
      login () {
        this.isloading = true
        this.$router.push('/art-verify')
        this.isloading = false
      }
    },
    created() {
      document.title = "template"
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped type="text/stylus" lang="stylus">
.bottom {
  width: 100%
  height: 100%
  background: url('http://pic.90sjimg.com/back_pic/u/00/00/95/36/55e6b4967d6f2.jpg') //#323232
  background-size: cover
  background-attachment: fixed
  background-color: #CCCCCC
  display: flex
  .center-div {
    margin: auto
    width: 32%
    /*background: green*/
    text-align: center
    border-radius: 5px
    .login-title {
      color: white
      font-size: 28px
      padding: 5px 0
      background: #323232
      border-radius: 5px
    }
    .login-upkb {
      background: hsla(0,0%,100%,.3)
      padding: 10px 30px
      overflow: hidden
      .login-username {
        margin: 7px 0
      }
      .login-passworld {
        margin: 7px 0
      }
      .login-btn {
        width: 45%
        float: left
        margin: 7px 0
      }
      .login-kk {
        width: 45%
        float: right
        margin: 7px 0
      }
    }
  }
}
</style>
